<template>
	<view class="comment-list flex-c" v-if="comments[0]">
		<view class="comment-list-head" :class="{'pd20': padding}">
			<text>全部留言</text>
		</view>
		<view class="comment-list-body flex-c" :class="{'radius': radius}" @tap="loadMore">
			<template v-for="(comment, index) in comments">
				<view class="comment-list-item flex-c" :key="index" v-if="comment.isShow == 1">
					<view class="comment-head flex-r ac">
						<view class="flex-r ac" >
							<lazy-image class="avatar" :src="comment.userAvatar+'?imageView2/1/w/100/h/100/q/50'" :type="comment.userType" fit="cover"></lazy-image>
						</view>
						<text>{{comment.userName || '用户'}}</text>
					</view>
					<view class="comment-body flex-c">
						<view class="comment-content">
							<text>{{comment.content}}</text>
						</view>
						<view class="comment-time flex-r ac jsb">
							<uni-dateformat class="text-info" :date="comment.createTime" format="yyyy.MM.dd hh:mm"></uni-dateformat>
							<view class="right flex-r ac" @tap.stop="likeAdd(comment)">
								<image :src="require('@/public/images/public/lydz_'+(comment.likeFlag === 1 ? 'yd' : 'wd')+'.png')" mode="aspectFit"></image>
								<text class="text-info color-grey">{{comment.likeNum || 0}}</text>
							</view>
						</view>
						<view class="comment-reply flex-c mt20" v-if="comment.replyNum">
							<view class="comment-reply-more flex-r ac">
								<text class="text-info color-blue">展开查看{{ comment.replyNum + '条'}}回复</text>
								<image src="@/public/images/bar/ljt_x.png" mode="aspectFit"></image>
							</view>
						</view>
					</view>
				</view>
			</template>
			<view class="comment-list-more flex-r ac jc" v-if="isLogin" >
				<text class="text-secondary color-grey">查看全部留言</text>
				<image class="right-icon" src="@/public/images/public/yjt_h.png" mode="aspectFit"></image>
			</view>
			<view class="comment-list-more flex-r ac jc" v-else >
				<text class="text-secondary color-grey">查看全部留言</text>
				<image class="right-icon" src="@/public/images/public/yjt_h.png" mode="aspectFit"></image>
			</view>
		</view>
		<view class="list-end flex-r pt20" v-if="commentsEnd && comments[0]">
			<text>已经到底啦～</text>
		</view>
	</view>
</template>

<script>
	/**
	 * CommentList 评论列表弹窗
	 * @description 方案详情、讨论贴等评论输入框
	 * @property {String} type = [1|3|7|8|99] 
	 *  @value 1 专家料
	 *  @value 3 晒单
	 *  @value 7 话题贴
	 *  @value 8 投票贴
	 *  @value 99 用户料
	 * @property {String} barId 球吧ID
	 * @property {String} msgId 方案或讨论贴ID
	 * @property {Boolean} refresh 刷新评论列表
	 * @property {Boolean} padding 是否有内边距
	 * @property {Boolean} radius 是否有圆角
	 * @event {Function} more 查看更多事件
	 * @example <CommentList type="1" :msgId="articleId" :barId="barId"></CommentList>
	 */
	export default {
		name: "CommentList",
		emits: ['more'],
		props: {
			type: {
				type: Number,
				default: 1
			},
			barId: {
				type: [String, Number],
				default: ''
			},
			msgId: {
				type: [String, Number],
				default: ''
			},
			refresh: {
				type: Boolean,
				default: false
			},
			padding: {
				type: Boolean,
				default: true
			},
			radius: {
				type: Boolean,
				default: false
			},

		},
		data() {
			return {
				pageNo: 1, //评论页数
				comments: [], //评论列表
				commentsEnd: false, //是否加载完
			};
		},
		watch: {
			refresh(newValue) {// 刷新列表
				if(newValue){
					this.pageNo = 1
					this.commentsEnd = false
					this.getCommentList()
				}
			}
		},
		mounted() {
			this.getCommentList()
		},
		computed:{
			isLogin(){
				return this.$store.state.isLogin
			}
		},
		methods: {
			//查看更多
			loadMore(){
				
				if(!this.isLogin){
					this.$CHS.goUserLogin()
					return
				}else{
					this.$emit('more')
				}
			},
			load(){
				if(!this.isLogin){
					this.$CHS.goUserLogin()
					return
				}
			},
			//查询评论列表
			getCommentList() {
				this.$http.get({
					url: '/api/chtyUserComment/pageComment',
					data: {
						msgId: this.msgId,
						type: this.type,
						pageNo: this.pageNo,
						pageSize: 5,
						forumId: this.barId
					}
				}).then(data => {
					console.log(data);
					if(data.success && data.result && data.result.total){
						if(data.result.current == 1){
							this.comments = data.result.records
						}else{
							this.comments.push(...data.result.records)
						}
						this.commentsEnd = data.result.current >= data.result.pages
						this.pageNo = data.result.current + 1
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			/**
			 * @description 评论点赞
			 * @param {object} comment 被点赞的评论对象
			 */
			likeAdd(comment) {
				if(!this.$store.state.isLogin){
					this.$CHS.goUserLogin()
					return
				}
				if(comment.likeFlag !== 1){
					this.$http.post({
						url: '/api/forum/like/add',
						data: {
							commonId: comment.id,
							forumId: this.barId,
							status: comment.likeFlag ? 0 : 1,
							type: 3
						}
					}).then(data => {
						console.log(data);
						if(data.success){
							this.$ShowToast({text: '点赞成功', type: 1})
							this.$set(comment, 'likeFlag', 1)
							comment.likeNum += 1
						}else{
							this.$ShowToast({text: data.message || '点赞失败，请稍后重试', type: 2})
						}
					})
				}
				
			}
		}
	}
</script>

<style lang="scss">
	.comment-list{
		margin-top: 40rpx;
		.comment-list-head{
			text{
				font-size: 36rpx;
				line-height: 36rpx;
				font-weight: bold;
			}
		}
		.comment-list-body{
			margin-top: 20rpx;
			background-color: #FFFFFF;
			&.radius{
				border-radius: 10rpx;
			}
			.comment-list-item{
				padding: 20rpx 20rpx 0;
				.comment-head{
					.avatar{
						width: 64rpx;
						height: 64rpx;
						border-radius: 50%;
					}
					text{
						margin-left: 20rpx;
						font-size: 28rpx;
						font-weight: 500;
					}
				}
				.comment-body{
					padding-left: 84rpx;
					.comment-content{
						text-align: justify;
						font-size: 24rpx;
						color: #666666;
						line-height: 36rpx;
						word-break: break-all;
					}
					.comment-time{
						margin-top: 20rpx;
						color: #B3B3B3;
						image{
							margin-right: 9rpx;
							width: 32rpx;
							height: 32rpx;
						}
					}
					.comment-reply{
						.comment-reply-more{
							image{
								margin-left: 10rpx;
								width: 16rpx;
								height: 16rpx;
							}
						}
					}
					
				}
			}
			.comment-list-item:first-child{
				padding-top: 30rpx;
			}
			.comment-list-item:last-child{
				padding-bottom: 30rpx;
			}
			.comment-list-more{
				border-top: 1rpx solid #ededed;
				margin-top: 30rpx;
				height: 80rpx;
				box-sizing: border-box;
				.right-icon{
					margin-left: 9rpx;
					width: 24rpx;
					height: 26rpx;
				}
			}
		}
	}
</style>